* {
    margin: 0px;
    padding: 0px;
}

body {
    width: 100%;
    height: 100%;
    background-image: url(../image/bg.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

input {
    display: none;
}

li {
    list-style: none;
    float: left;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiperBox {
    width: 600px;
    height: 350px;
    margin: 50px auto;
}

.swiperBox img {
    width: 600px;
    height: 350px;
    transition: 1s;
    z-index: 1;
}

.imgA,
.imgB,
.imgC,
.imgD {
    display: none;
}

.chaBox {
    width: 100px;
    height: 350px;
    top: 50px;
    float: left;
    background-color: white;
    transition: 1s;
    position: absolute;
    opacity: 0;
}

.chaBox .icon {
    width: 20px;
    height: 20px;
}

.left .icon {
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    transform: rotate(45deg);
}

.right {
    left: 700px;
}

.right .icon {
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    transform: rotate(-135deg);
}


.botBox {
    width: 400px;
    height: 50px;
    position: absolute;
    left: 290px;
    top: 354px;
    z-index: 2;
}

.botBox li {
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    margin: 0px 5px;
}

/* 动画效果 */
.chaBox:hover {
    opacity: 0.8;
}

/* 底部切换按钮动画绑定 */
input:nth-child(1):checked~.imgBox .imgA {
    display: block;
}

input:nth-child(2):checked~.imgBox .imgB {
    display: block;
}

input:nth-child(3):checked~.imgBox .imgC {
    display: block;
}

input:nth-child(4):checked~.imgBox .imgD {
    display: block;
}

/* 底部切换按钮样式 */
input:nth-child(1):checked~.botBox label:nth-child(1) li {
    background-color: rgb(51, 50, 50);
}

input:nth-child(2):checked~.botBox label:nth-child(2) li{
    background-color: rgb(51, 50, 50);
}

input:nth-child(3):checked~.botBox label:nth-child(3) li{
    background-color: rgb(51, 50, 50);
}

input:nth-child(4):checked~.botBox label:nth-child(4) li{
    background-color: rgb(51, 50, 50);
}

/* 左右切换按钮 */
input:nth-child(1):checked~.imgBox .imgA {
    display: block;
}

input:nth-child(2):checked~.imgBox .imgB {
    display: block;
}

input:nth-child(3):checked~.imgBox .imgC {
    display: block;
}

input:nth-child(4):checked~.imgBox .imgD {
    display: block;
}